<template>
  <div style="position: relative">
    <a-tabs
      v-model:activeKey="activeKey"
      @change="slectactiveKey"
      v-if="userInfo.type != 'admin'"
    >
      <a-tab-pane key="hospital" tab="医院端"></a-tab-pane>
      <a-tab-pane key="staff" tab="APP端"></a-tab-pane>
    </a-tabs>
    <a-spin :spinning="spinning">
      <a-tree
        checkable
        :replaceFields="replaceFields"
        :tree-data="menuList"
        :checkStrictly="true"
        v-model:checkedKeys="checkedKeys"
        :defaultExpandAll="defaultExpandAll"
      >
      </a-tree>
    </a-spin>
  </div>
</template>
<script>
import {
  defineComponent,
  onMounted,
  reactive,
  ref,
  toRaw,
  toRef,
  toRefs,
  watch,
} from "vue";
import { message } from "ant-design-vue";

import * as settingApi from "@/api/setting1";
import * as Utils from "@/utils";
import { getUserInfo } from "@/utils/auth";
const replaceFields = { children: "children", title: "name", key: "id" };
const defaultExpandAll = true;
export default defineComponent({
  props: {
    handleRow: {
      type: Object,
      default: {},
    },
  },

  setup(props, { emit }) {
    

    const spinning = ref(false);
    const roleId = ref("");
    const userInfo = ref({});
    const tabKey = ref("hospital");
    const checkedKeys = ref([]);
    const dataList = reactive({
      menuList: [],
    });
    //获取角色列表菜单权限
    const handleGetRoleMenus = (id) => {
      settingApi.getListByRoleId(id).then((res) => {
        if (res && res.success) {
          let menus = [];
          if (res.data) {
            menus = res.data.map((item) => {
              return item.id;
            });
          }
          handleGetMenus(menus);
        }
      });
    };
    const handleGetMenus = async (_menus) => {
      spinning.value = true;
      let data = {
        isPage: false,
        sysFlag: userInfo.value.type == "admin" ? "admin" : tabKey.value,
      };
      if (userInfo.value.type != "admin") {
        await slectactiveKey("hospital");
           checkedKeys.value = _menus;
      } else {
        settingApi.menusList(data).then((res) => {
          if (res && res.success) {
            dataList.menuList = Utils.treeDataTranslate(res.data);
            spinning.value = false;
            if (_menus && _menus.length != 0) {
              checkedKeys.value = _menus;
            }
          }
        });
      }
    };

    const handleSave = () => {
      let isAdmin = userInfo.value.type == "admin";
      let arr = [];
      // if (isAdmin) {
        console.log(checkedKeys.value);
        arr = checkedKeys.value.checked ? checkedKeys.value.checked :checkedKeys.value;
      // }
      settingApi
        .concatMenu({
          roleId: roleId.value,
          menuIds: arr,
        })
        .then((res) => {
          if (res && res.success) {
            emit("finish");
          } else {
          }
        })
        .catch((e) => {});
    };
    const activeKey = ref("hospital");
    // 切换tab
    const slectactiveKey = async (val) => {
      spinning.value = true;
      let menu = await settingApi.menusList({
        isPage: false,
        sysFlag: val,
      });
      if (menu && menu.success) {
        dataList.menuList = Utils.treeDataTranslate(menu.data);
        spinning.value = false;
      }
    };
    onMounted(async () => {
      userInfo.value = getUserInfo() ? JSON.parse(getUserInfo()) : {};
      roleId.value = props.handleRow.id;
      handleGetRoleMenus(props.handleRow.id);
    });

    return {
      checkedKeys,
      userInfo,
      replaceFields,
      defaultExpandAll,
      spinning,
      ...toRefs(dataList),

      handleSave,
      slectactiveKey,
      activeKey,
    };
  },
});
</script>
<style lang="scss">
</style>